/* wrapper */
#wrapper{
    position: relative;
    padding: 90px 10% 16px;
    width: 100%;
    color: #ffffff;
    background-color: #333333;
}

form{
    display: inline-block;
    width: 100%;
}

#result{
    float:left;
    width: 30%;
    height: 660px;
    background: #dddddd;
    margin-left: 2.5%;
    padding: 20px;
    display: block;
    font-size: 15px;
    color: #333333;
}
#editor{
    width:65%;
    height: 100%;
    float: right;
    margin-left:2%;
}
.CodeMirror{
    min-height:600px;
    max-height:600px;
    width: 95%;
    background: #222222;
    border: 0;
    margin-top: 0;
    color: #dddddd;
    font-size: 15px;
}
.editor_btn {
    display: inline-block;
    width: 94%;
    padding-top :5px;
}
.btn-reset,.btn-run{
    float: right;
    height: 45px;
    width: 45%;
    color: #333333;
    border-radius: 0;
    background-color: #dddddd;
}
.btn-reset {
    margin-right: 5%;
}
.btn-reset:hover,
.btn-reset:focus,
.btn-reset:active{
    color: #ffffff;
    background-color: #ba514d;
}
.btn-run:hover,
.btn-run:focus,
.btn-run:active{
    color: #ffffff;
    background-color: #00a74e;
}

@media (max-width: 640px) {

    #wrapper{
        padding: 0;
    }

    #editor{
        width:95%;
        height: 100%;
        margin: 75px 0 0 5%;
    }

    #result{
        width: 90%;
        margin: 5%;
    }
}

